<script lang="ts">
  import { onMount } from 'svelte'
  import { KLineChartPro, DefaultDatafeed } from '@klinecharts/pro'
  import '@klinecharts/pro/dist/klinecharts-pro.css'
  
  let locale = 'zh-CN'

  onMount(() => {
    const hash = window.location.hash
    if (hash.endsWith('#en-US')) {
      locale = 'en-US'
    }
    const options = {
      container: 'container',
      locale,
      watermark: `<svg
          class="logo"
          viewBox="0 0 160 160">
          <path d="M95.1576,6.27848L153.722,64.8424Q156.803,67.9238,158.43,71.9362Q160,75.8078,160,80Q160,84.1922,158.43,88.0638Q156.803,92.0762,153.722,95.1576L95.1576,153.722Q92.0762,156.803,88.0638,158.43Q84.1922,160,80,160Q75.8078,160,71.9362,158.43Q67.9238,156.803,64.8424,153.722L6.27848,95.1576Q3.19708,92.0762,1.56999,88.0638Q0,84.1922,0,80Q0,75.8078,1.56999,71.9362Q3.19707,67.9238,6.27848,64.8424L64.8424,6.27848Q67.9238,3.19707,71.9362,1.56999Q75.8078,0,80,0Q84.1922,0,88.0638,1.56999Q92.0762,3.19707,95.1576,6.27848ZM87.9397,13.4964Q86.322,11.8787,84.2279,11.0295Q82.2013,10.2077,80,10.2077Q77.7987,10.2077,75.7721,11.0295Q73.678,11.8787,72.0603,13.4964L54.5534,31.0033L105.447,31.0033L87.9397,13.4964ZM107.561,118.789Q109.848,118.789,111.93,117.909Q113.944,117.057,115.5,115.5Q117.057,113.944,117.909,111.93Q118.789,109.848,118.789,107.561L118.789,52.4393Q118.789,50.1516,117.909,48.0703Q117.057,46.0562,115.5,44.4996Q113.944,42.9431,111.93,42.0912Q109.848,41.2109,107.561,41.2109L52.4393,41.2109Q50.1515,41.2109,48.0703,42.0912Q46.0562,42.9431,44.4996,44.4996Q42.9431,46.0562,42.0912,48.0703Q41.2109,50.1515,41.2109,52.4393L41.2109,107.561Q41.2109,109.848,42.0912,111.93Q42.9431,113.944,44.4996,115.5Q46.0562,117.057,48.0703,117.909Q50.1516,118.789,52.4393,118.789L107.561,118.789ZM13.4964,72.0603L31.0033,54.5534L31.0033,105.447L13.4964,87.9397Q11.8787,86.322,11.0295,84.2278Q10.2077,82.2013,10.2077,80Q10.2077,77.7987,11.0295,75.7721Q11.8787,73.678,13.4964,72.0603ZM146.504,87.9397L128.997,105.447L128.997,54.5534L146.504,72.0603Q148.121,73.678,148.971,75.7721Q149.792,77.7987,149.792,80Q149.792,82.2013,148.971,84.2279Q148.121,86.322,146.504,87.9397ZM72.0603,146.504L54.5534,128.997L105.447,128.997L87.9397,146.504Q86.322,148.121,84.2278,148.971Q82.2012,149.792,80,149.792Q77.7987,149.792,75.7721,148.971Q73.678,148.121,72.0603,146.504Z" fill-rule="evenodd" fill-opacity="1"/>
          <path d="M64.16208911132813,62.68834972381592C63.348189111328125,62.68834972381592,62.68838911132812,63.27273572381592,62.68838911132812,63.993609723815915L62.68838911132812,71.82518972381592L55.319959111328124,71.82518972381592C53.69216911132813,71.82518972381592,52.372589111328125,72.99394972381592,52.372589111328125,74.43574972381592L52.372589111328125,96.62514972381592C52.372589111328125,98.06694972381592,53.69216911132813,99.23574972381593,55.319959111328124,99.23574972381593L62.68838911132812,99.23574972381593L62.68838911132812,107.06724972381592C62.68838911132812,107.78814972381592,63.348189111328125,108.37254972381592,64.16208911132813,108.37254972381592C64.97598911132812,108.37254972381592,65.63578911132812,107.78814972381592,65.63578911132812,107.06724972381592L65.63578911132812,99.23574972381593L73.00418911132812,99.23574972381593C74.63198911132812,99.23574972381593,75.95148911132813,98.06694972381592,75.95148911132813,96.62514972381592L75.95148911132813,74.43574972381592C75.95148911132813,72.99394972381592,74.63198911132812,71.82518972381592,73.00418911132812,71.82518972381592L65.63578911132812,71.82518972381592L65.63578911132812,63.993609723815915C65.63578911132812,63.27273572381592,64.97598911132812,62.68834972381592,64.16208911132813,62.68834972381592Z" fill-rule="evenodd" fill-opacity="1"/>
          <path d="M96.58314395141602,52.37255859375C95.76924395141602,52.37255859375,95.10944395141601,52.95694459375,95.10944395141601,53.67781859375L95.10944395141601,61.50939859375L87.74101395141602,61.50939859375C86.11322395141602,61.50939859375,84.79364395141602,62.67815859375,84.79364395141602,64.11995859375L84.79364395141602,86.30935859375C84.79364395141602,87.75115859375,86.11322395141602,88.91995859375001,87.74101395141602,88.91995859375001L95.10944395141601,88.91995859375001L95.10944395141601,96.75145859375C95.10944395141601,97.47235859375,95.76924395141602,98.05675859375,96.58314395141602,98.05675859375C97.39704395141601,98.05675859375,98.05684395141601,97.47235859375,98.05684395141601,96.75145859375L98.05684395141601,88.91995859375001L105.42524395141601,88.91995859375001C107.05304395141602,88.91995859375001,108.37254395141602,87.75115859375,108.37254395141602,86.30935859375L108.37254395141602,64.11995859375C108.37254395141602,62.67815859375,107.05304395141602,61.50939859375,105.42524395141601,61.50939859375L98.05684395141601,61.50939859375L98.05684395141601,53.67781859375C98.05684395141601,52.95694459375,97.39704395141601,52.37255859375,96.58314395141602,52.37255859375Z" fill-rule="evenodd" fill-opacity="1"/>
        </svg>`,
      symbol: {
        exchange: 'XNYS',
        market: 'stocks',
        name: 'Alibaba Group Holding Limited American Depositary Shares, each represents eight Ordinary Shares',
        shortName: 'BABA',
        ticker: 'BABA',
        priceCurrency: 'usd',
        type: 'ADRC',
        logo: ''
      },
      period: { multiplier: 15, timespan: 'minute', text: '15m' },
      subIndicators: ['VOL', 'MACD'],
      datafeed: new DefaultDatafeed(import.meta.env.VITE_POLYGON_IO_API_KEY)
    }
    new KLineChartPro(options)
  })
</script>

<main>
  <div class="github"></div>
  <p class="announcement-bar">
    <svg viewBox="0 0 1024 1024" width="16" height="16">
      <path d="M512 184c44.3 0 87.3 8.7 127.6 25.7 39 16.5 74.1 40.2 104.3 70.3 30.2 30.2 53.8 65.3 70.3 104.3C831.3 424.7 840 467.7 840 512s-8.7 87.3-25.7 127.6c-16.5 39-40.2 74.1-70.3 104.3-30.2 30.2-65.3 53.8-104.3 70.3C599.3 831.3 556.3 840 512 840s-87.3-8.7-127.6-25.7c-39-16.5-74.1-40.2-104.3-70.3-30.2-30.2-53.8-65.3-70.3-104.3C192.7 599.3 184 556.3 184 512s8.7-87.3 25.7-127.6c16.5-39 40.2-74.1 70.3-104.3s65.3-53.8 104.3-70.3C424.7 192.7 467.7 184 512 184m0-120C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z" fill="#006EFF"/>
      <path d="M452 464.5h120v300H452z" fill="#006EFF"/>
      <path d="M512 323.3m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" fill="#006EFF"/>
    </svg>
    UI&nbsp;{locale === 'zh-CN' ? '来自' : 'from'}&nbsp;
    <a target="_blank" rel="noreferrer noopener" href="https://pro.klinecharts.com">KLineChart Pro</a>
    {locale === 'zh-CN' ? '，数据来自' : ', Data from'}&nbsp;
    <a target="_blank" rel="noreferrer noopener" href="https://polygon.io">polygon.io</a>
    {locale === 'zh-CN' ? '，源码' : ', Source code'}&nbsp;
    <a target="_blank" rel="noreferrer noopener" href="https://github.com/klinecharts/preview">klinecharts/preview</a>
  </p>
  <div id="container">
  </div>
</main>
